<template>
  <div class="gl-breadcrnmb p20">
    <el-breadcrumb :separator="separator">
      <el-breadcrumb-item v-for="(t, i) in tArr"
                          :key="i">
        <a class="inner-a"
           v-if="lArr[i]"
           href="/"
           @click.stop.prevent="linkTo(lArr[i])">{{t}}</a>
        <span v-else>{{t}}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'GlBreadcrumb',
  props: {
    text: {
      type: Array | String,
      default: ''
    },
    link: {
      type: Array | String,
      default: ''
    },
    separator: {
      type: String,
      default: ' / '
    }
  },
  data() {
    return {
      tArr: [],
      lArr: []
    }
  },
  watch: {
    text(val) {
      this.splitBreadcrumb()
    }
  },
  created() {
    this.splitBreadcrumb()
  },
  methods: {
    splitBreadcrumb() {
      let { text, link } = this
      this.tArr = typeof text === 'string' ? text.split(/\s*,\s*/) : [...text]
      if (link === '') {
        let len = this.tArr.length - 1
        this.lArr = this.tArr.map((e, i) => i - len)
      } else {
        this.lArr = typeof link === 'string' ? link.split(/\s*,\s*/) : [...link]
      }
    },
    linkTo(link) {
      if (!isNaN(link)) {
        this.$router.go(link * 1)
      } else {
        this.$router.replace(link)
      }
    }
  }
}
</script>

<style scoped lang="less">
.gl-breadcrnmb {
  background-color: #fff;
  .inner-a {
    text-decoration: unset;
  }
}
</style>